{% extends 'base.html' %}
{% load static %}
{% load persian %}

{% block title %}{{ category.name }} - {{ site_settings.site_name|default:"خبرگزاری ایثار" }}{% endblock %}

{% block content %}
<!-- ===== استایل اختصاصی برای ۳ ستونه ===== -->
<style>
    @media (min-width: 993px) {
        .news-grid { grid-template-columns: repeat(3, 1fr) !important; }
    }
    @media (max-width: 992px) and (min-width: 577px) {
        .news-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 576px) {
        .news-grid { grid-template-columns: 1fr !important; }
    }
</style>
<!-- =================================== -->

<div class="category-header">
    <h2>
        {% if category.icon %}<i class="fas {{ category.icon }}"></i>{% endif %}
        {{ category.name }}
    </h2>
    <p><i class="fas fa-newspaper"></i> جدیدترین اخبار دسته {{ category.name }}</p>
</div>

<div class="news-grid">
    {% for article in page_obj %}
        <div class="news-card">
            {% if article.image %}
            <img src="{{ article.image.url }}" alt="{{ article.title }}">
            {% else %}
            <div class="no-img"><i class="fas fa-image"></i> بدون عکس</div>
            {% endif %}
            <div class="card-body">
                <h4><a href="{% url 'detail' article.id %}">{{ article.title }}</a></h4>
                <p>{{ article.summary|truncatewords:15 }}</p>
                <div class="meta">
                    <span><i class="fas fa-calendar-alt"></i> {{ article.publish_time|date:"Y/m/d - H:i"|to_persian_num }}</span>
                    {% if article.views %}
                    <span><i class="fas fa-eye"></i> {{ article.views|to_persian_num }}</span>
                    {% endif %}
                </div>
            </div>
        </div>
    {% empty %}
        <p style="grid-column: 1 / -1; text-align: center; padding: 50px; background: #fff; border-radius: 14px; color: #6c757d;">
            <i class="fas fa-info-circle"></i> خبری در این دسته وجود ندارد.
        </p>
    {% endfor %}
</div>

<!-- ===== دکمه‌های صفحه‌بندی ===== -->
{% if page_obj.has_other_pages %}
<div class="pagination-container">
    {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}" class="page-link"><i class="fas fa-chevron-right"></i> قبلی</a>
    {% else %}
        <span class="page-link disabled"><i class="fas fa-chevron-right"></i> قبلی</span>
    {% endif %}

    {% for num in page_obj.paginator.page_range %}
        {% if page_obj.number == num %}
            <span class="page-link active">{{ num|to_persian_num }}</span>
        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
            <a href="?page={{ num }}" class="page-link">{{ num|to_persian_num }}</a>
        {% endif %}
    {% endfor %}

    {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}" class="page-link">بعدی <i class="fas fa-chevron-left"></i></a>
    {% else %}
        <span class="page-link disabled">بعدی <i class="fas fa-chevron-left"></i></span>
    {% endif %}
</div>
{% endif %}
{% endblock %}